<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态属性绑定</title>
</head>

<body>
    <div id="app">
        <!--绑定 class 属性-->
        <!-- class属性的dark、light是否存在取决于 page.darkMode、page.lightMode的真假值-->
        <div :class="{ dark: page.darkMode,light:page.lightMode }">
            <p>inputText: {{page.inputText}}</p>
            <!--绑定 value 属性-->
            <input type="text" v-bind:value="page.inputText" />
            <!--可以简写成 :value-->
            <input type="text" :value="page.inputText" />
            <br />
            <a :href="page.linkUrl">跳转到网站: {{page.linkUrl}}</a>
            <hr />
            <p>页面样式: {{page.styleName}}</p>
            <button @click=" changeStyle">更改页面样式</button>
        </div>

    </div>
    <script type="module">
        import { createApp, reactive } from '../00-dependency/vue.esm-browser.js'
        createApp({
            setup() {
                const page = reactive({
                    inputText: 'Hello Vue3',
                    linkUrl: "https://www.dcsgo.com.cn",
                    styleName: "light",
                    lightMode: true,
                    darkMode: false
                })
                const changeStyle = () => {
                    console.log(page)
                    if (page.styleName == 'light') {
                        page.styleName = 'dark'
                        page.lightMode = false
                        page.darkMode = true
                    } else {
                        page.styleName = 'light'
                        page.lightMode = true
                        page.darkMode = false
                    }
                }
                return {
                    page,
                    changeStyle
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

<style>
    .light {
        color: black;
        background-color: white;
    }

    .dark {
        color: white;
        background-color: black;
    }
</style>